<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文化沙龙主页</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

.fl {
	float: left;
	
}

.fr {
	float: right;
}

.toplinkul {
	float: left;
	width: 60px;
	text-align: center;
}

.spaceli {
	width: 8px;
	float: left;
	text-align: center;
	color: #ddd;
}

#main {
	width: 907px;
	background: #FFF;
	margin: 0 auto;
}

#navTop {
	width: 907px;
	height: 25px;
	background: #EEE;
	line-height: 25px;
	font-size: 13px;
}

#first {
	float: left;
	padding-left: 82px;
}

#second {
	float: right;
	padding-right: 10px;
}
#second ul {
	list-style: none;
}

#search {
	width: 907px;
	height: 91px;
	margin: 0 auto;
}

.slidepic {
	width: 444px;
	height: 179px;
}

.searchbtn {
	border: 0;
	width: 448px;
	height: 43px;
	margin-top: 24px;
	background-image: url(images/se.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	padding-left: 10px;
}

.btnbg {
	background: url(images/bg1.jpg) center;
	border: 0;
	width: 95px;
	height: 43px;
}

.nav {
	width: 907px;
	height: 34px;
	margin: 0 auto;
	background: #FF9900;
	line-height: 34px;
	font-size: 14px;
}

#nav_proClass {
	width: 149px;
	text-align: center;
}

#nav_food {
	width: 609px;
}

#nav_adv {
	width: 148px;
	text-align: center;
	float: left;
}

#pro {
	width: 907px;
	height: 228px;
	margin: 0 auto;
	margin-bottom: 2px;
}

#navList {
	width: 148px;
	border: 1px solid #FFCC01;
	padding-left: 10px;
	height: 228px;
	padding-top: 10px;
	background: #EEE;
}

#navList ul {
	list-style: none;
}

#navList ul li {
	height: 30px;
}

#advPic {
	width: 611px;
	border-bottom: 1px solid #FFCC01;
	text-align: center;
}
.carousel {

	width: 611px;
	margin-bottom:0px;
}
.carousel .item{
	height:227px;
	background-color:#000;
}
.carousel .item img{
	width:100%;
}
.carousel-caption {
	z-index:10;
}
.carousel-caption p {
	margin-bottom:20px;
	font-size:20px;
	line-height:1.8;
}
#advTxt {
	width: 148px;
	height: 228px;
	background: #FF9999;
	border: 1px solid #FFCC01;
	font-size: 14px;
	padding: 10px;
	line-height: 26px;
}
.productimg {
	width:600px;
	height:340px;
}
.productimg ul li {
	float: left;
	margin-left: 5px;
	margin-right: 5px;
	display: block;
}

.recommendimg {
	width: 140px;
}
.recommendimg ul {
	list-style: none;
}
.recommendimg ul li {
	margin-left: 5px;
	margin-right: 5px;
	margin-top:5px;
}
.recommendnotice {
	width: 140px;
}
.recommendnotice ul {
	list-style: none;
}
.recommendnotice ul li {
	margin-left: 5px;
	margin-right: 5px;
	margin-top:5px;
}


.bottom {
	width: 609px;
	height: 30px;
	margin: 0 auto;
	background: #FF9900;
	line-height: 30px;
	font-size: 14px;
	padding-left: 0px;
}
.hottitle {
	width: 148px;
	height: 30px;
	margin: 0 auto;
	background: #FF9900;
	line-height: 34px;
	font-size: 14px;
	padding-left: 20px;

}

.recommend {
	width: 149px;
	height: 768px;
	float: left;
	border: 1px solid #FFCC01;
}

.showareaddd {
	width: 907px;
	margin: 0 auto;
	font-size: 14px;
	height: 768px;

}

.hotgoods {
	width: 609px;
	float: left;
	
		border: 1px solid #FFCC01;
}

.detail {
	display: block;
	margin-top: 2px;
	text-align:center;
	line-height:1.0;
}

.addCar {
	text-align: center;
	background: #FC0;
	margin-top: 2px;
	cursor: hand;
}
.foot {
	width: 907px;
	background: #FFF;
	margin: 0 auto;
	height:160px;
	border: 1px solid #FFCC01;
}
a:link {
	color: #000;
	text-decoration: none;
}

a:link.reg {
	color: #FF0000;
}
</style>
<link
	href="${pageContext.request.contextPath }/bootstrap/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${pageContext.request.contextPath }/jquery/jquery-1.11.2.min.js"></script>
<script
	src="${pageContext.request.contextPath }/bootstrap/bootstrap.min.js"></script>
<style type="text/css">
<!--
.STYLE3 {font-size: 16px;
	height: auto;
	width: auto;
}
.STYLE4 {font-size: 14px}
.STYLE5 {font-size: 14px; height: auto; width: auto; }
.price {color:#FF6600;
	font-size:14px;
	height: auto;
	width: 907px;
}
-->
</style>
</head>
<body>
<div id="main">
		<div id="navTop">
			<div id="first"></div>
			<div id="second">
				<ul>
					<li class="toplinkul" style="width: auto;">您好，${sessionScope.user.userName }</li>
					<li class="spaceli">|</li>
					<li class="toplinkul"><a href="login.do?userAction=logout">退出系统</a></li>
					<li class="spaceli">|</li>
					<li class="toplinkul"><a href="userorderslist.do">我的订单</a></li>
					<li class="spaceli">|</li>
					<li class="toplinkul"><a href="shopcartmanager.do">购物车</a></li>
					<li class="spaceli">|</li>
					<li class="toplinkul"><a href="#">客服电话</a></li>
					<li class="spaceli">|</li>
					<li class="toplinkul"><a href="#">加入我们</a></li>
				</ul>
			</div>
		</div>
		<div id="search">
			<img src="logo/zhuyelogo.jpg" width="354" height="90" class="fl" />
			<div class="fr">
				<form action="goodssearch.do" method="post" class="form-inline">
				<div class="form-group" style="margin-top:30px;" >
<!-- 					<input type="text" name="goodsName" id="goodsName" class="form-control searchbtn" placeholder="请输入您要搜索的商品" /> -->
					<input type="text" name="goodsName" id="goodsName" class="form-control" style="width: 260px;" placeholder="请输入您要搜索的商品" />
					<input name="btn1" type="submit" class="btn btn-warning" id="btn1" value="搜索"/>
				</div>
				</form>
			</div>
  </div>
		<div class="nav">
			<div id="nav_proClass" class="fl">
				<a href="showgoods.do">产品分类</a>
			</div>
			<div id="nav_food" class="fl">超值套餐</div>
			<div id="nav_adv">沙龙公告</div>
		</div>
		<div id="pro">
			<div id="navList" class="fl">

				<ul>
					<c:forEach items="${requestScope.topcategorylist }"
						var="topcategory">
						<li><a href="showgoods.do?categoryId=${topcategory.id}">${topcategory.categoryName}
								></a></li>
					</c:forEach>

				</ul>
			</div>
			<div id="advPic" class="fl">
				
<div id="myCarousel" class="carousel slide" data-ride="carousel">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<a href="goodsinfo.do?id=9"><img
								src="${pageContext.request.contextPath }/images/lunbo2.jpg"
								alt="First slide" border="0" class="slidepic"></a>
					  </div>
						<div class="item">
							<a href="goodsinfo.do?id=7"><img
								src="${pageContext.request.contextPath }/images/lunbo3.jpg"
								alt="Second slide" border="0" class="slidepic"></a>
					  </div>
						<div class="item">
							<a href="goodsinfo.do?id=19"><img
								src="${pageContext.request.contextPath }/images/lunbo4.jpg"
								alt="Third slide" border="0" class="slidepic"></a>
					  </div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="carousel-control left" href="#myCarousel" role="button"
						data-slide="prev">&lsaquo;</a> <a class="carousel-control right"
						href="#myCarousel" role="button" data-slide="next">&rsaquo;</a>
			  </div>
		  </div>


		 <div id="advTxt" class="fl">				<div class="recommendnotice">
					<ul>
						<c:forEach items="${requestScope.noticeList4 }"
							var="notice4">
							<li><a href="notice.do?id=${notice4.id }" >  <span
								class="detail">
									<p>${notice4.title }</p>
							</span>
							</a></li>
						</c:forEach>
					</ul>
				</div></div>
		</div>
		<div class="showareaddd">
			<div class="recommend">
									<div class="hottitle">传统节日介绍</div>
				<div class="recommendnotice">
					<ul>
						<c:forEach items="${requestScope.noticeList1 }"
							var="notice1">
							<li><a href="notice.do?id=${notice1.id }" >  <span
								class="detail">
									<p>${notice1.title }</p>
							</span>
							</a></li>
						</c:forEach>
					</ul>
				</div>
				<div class="hottitle">沙龙历史介绍</div>
				<div class="recommendnotice">
					<ul>
						<c:forEach items="${requestScope.noticeList2 }"
							var="notice2">
							<li><a href="notice.do?id=${notice2.id }" >  <span
								class="detail">
									<p>${notice2.title }</p>
							</span>
							</a></li>
						</c:forEach>
					</ul>
				</div>
								<div class="hottitle">勤工助学信息</div>
				<div class="recommendnotice">
					<ul>
						<c:forEach items="${requestScope.noticeList3 }"
							var="notice3">
							<li><a href="notice.do?id=${notice3.id }" >  <span
								class="detail">
									<p>${notice3.title }</p>
							</span>
							</a></li>
						</c:forEach>
					</ul>
				</div>

			</div>
			
				<div class="hotgoods">

				<c:forEach items="${requestScope.topcategorylist }"
					var="topcategory">

				
						<div class="bottom">
							<a href="showgoods.do?categoryId=${topcategory.id}">${topcategory.categoryName}
								></a>&nbsp;热门</div>
				  <div class="productimg">
								<c:set var='myname' value="CategoryAndSub${topcategory.id}"
									scope="page" />
								<ul>
									<c:forEach items="${requestScope.goodsMap[myname] }"
										var="goods">
										<li><a href="goodsinfo.do?id=${goods.id }" >
										<img width="140" height="123"
											src="${goods.goodsPictureUrl }" /> </a><span class="detail">
												<p>${goods.goodsName }</p>
												<p><font color="red">￥${goods.retailPrice }</font></p>
										</span></li>
									</c:forEach>
								</ul>
				  </div>
				</c:forEach>
		  </div>
			<div class="recommend">
									<div class="hottitle">
							热销产品推荐</div>
				<div class="recommendimg">

					<ul>
						<c:forEach items="${requestScope.hotGoodsList }" var="hotGoods">
							<li><a href="goodsinfo.do?id=${hotGoods.id }" >
							<img width="140" height="123"
								src="${hotGoods.goodsPictureUrl }" /> </a><span class="detail">
									<p>${hotGoods.goodsName }</p>
									<p><font color="red">￥${hotGoods.retailPrice }</font></p>
							</span></li>
						</c:forEach>
					</ul>
				</div>

			</div>
  </div>
		<div class="foot">
		  <div align="center">
		    <hr align="center"  width="907" color="#FF6600" class="price" />
		    <p><br />
                <span class="STYLE4">公司简介&nbsp; |&nbsp;&nbsp; Investor Relations&nbsp; |&nbsp; 诚征英才&nbsp; |&nbsp; 网站联盟&nbsp; |&nbsp; 广告服务&nbsp; |&nbsp; 文化沙龙招商&nbsp; |&nbsp; 机构销售&nbsp; |&nbsp; 手机文化沙龙&nbsp; |&nbsp; 官方 Blog </span> </p>
		    <p class="STYLE4">&nbsp;</p>
		    <span class="STYLE4">Copyright © 2014-2015 文化沙龙 版权所有 增值电信业务经营许可证蒙B2-20120030</span>
		    <p class="STYLE3">&nbsp;</p>
	      </div>
  </div>
</div>
</body>
</html>